<template>
	<view class="container">
		<view class="subscribe">
			<u-divider half-width="40" margin-bottom="30" fontSize="32">联系协会</u-divider>
			<view class="form">
				<view class="form_item">
					<text class="require">姓名 : </text>
					<u-input 
						v-model="form.name" 
						height="100" 
						:clearable="false" 
						type="text" 
						placeholder="请输入您的姓名" />
				</view>
				<view class="form_item">
					<text class="require">电话 : </text>
					<u-input 
						v-model="form.phone" 
						height="100" 
						:clearable="false" 
						type="number" 
						maxlength="11"
						placeholder="请输入您的手机号" />
				</view>
				<view class="form_item">
					<text class="require">备注 : </text>
					<u-input 
						v-model="form.remark" 
						height="200" 
						:clearable="false" 
						type="textarea" 
						placeholder="请输入您的备注" />
				</view>
			</view>
		</view>
		<view class="foot_btn">
			<u-button @click="submitInfo" type="success">立即咨询</u-button>
		</view>
	</view>
</template>

<script>
	import { submitMsg } from '../../api/api'
	export default {
		data() {
			return {
				form: {
					name: '',
					phone: '',
					remark: ''
				},
				id: '',
				module: ''
			};
		},
		onLoad(options) {
			this.id = options.id
			this.module = options.module
			this.form.phone = uni.getStorageSync('userInfo').mobile || ''
		},
		methods: {
			submitInfo() {
				var phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
				if(!this.form.name) return this.$u.toast('请输入您的姓名')
				if(!this.form.phone) return this.$u.toast('请输入您的手机号')
				if(!phoneReg.test(this.form.phone)) return this.$u.toast('请输入正确的手机号')
				if(!this.form.remark) return this.$u.toast('请输入您的备注')
				submitMsg({
					token: uni.getStorageSync('userInfo').token,
					module: this.module,
					module_id: this.id,
					name: this.form.name,
					phone: this.form.phone,
					content: this.form.remark
				}).then(res => {
					this.$u.toast(res.msg)
				}).catch(err => {
					this.$u.toast(err.msg)
				})
			}
		}
	}
</script>

<style lang="scss">
.subscribe {
	width: 100%;
	padding: 30rpx 0 0;
	background-color: #fff;
	.form {
		padding: 0 30rpx 30rpx;
		border-top: 1px solid #eee;
		/deep/ .u-input {
			background-color: #eee;
			border-radius: 8rpx;
		}
		/deep/ .uni-input-wrapper {
			background-color: #eee;
			border-radius: 8rpx;
		}
		/deep/ .uni-input-placeholder {
			color: #666 !important;
		}
		/deep/ .u-input__input {
			padding: 0 20px;
			box-sizing: border-box;
		}
	
		/deep/ .u-input__textarea {
			background-color: #eee;
			padding: 10px 20px;
			color: #666;
			box-sizing: border-box;
			border-radius: 8rpx;
		}
		.uni-textarea-placeholder {
			color: #666 !important;
		}
		.form_item {
			text {
				display: block;
				margin: 20rpx 0;
				font-size: 30rpx;
			}
			.require::before {
				content: '*';
				color: #f00;
				margin-right: 10rpx;
			}
		}
	}
}
.foot_btn {
	width: 100%;
	padding: 0 30rpx;
	margin-top: 50rpx;
}
</style>
